<template>
  <view class="list">
    <u-modal v-model="celshow" :show-cancel-button="true" content="确认取消砍价吗" @confirm="cancelbargain"></u-modal>
    <view class="" style="margin-top: 400rpx;" v-if="userbargainlist.list.length===0">
      <u-empty text="暂无砍价列表" mode="favor"></u-empty>
    </view>

    <view class="Full-item" v-for="(item, index) in userbargainlist.list" :key="item.id" v-else
    >
      <!-- 中 -->
      <view class="item-c">
        <!-- 图片 -->
        <view class="item-img">
          <image :src="item.image_url" mode=""></image>
        </view>
      </view>
      <!-- 右 -->
      <view class="item-nr">
        <text class="nr-title">{{item.name}}</text>
        <text class="nr-guige">规格：默认</text>
        <text class="nr-price">￥{{item.unit_price}}</text>
        <!-- 右 -->
        <view class="item-y">
          <view class="quxuaoikj"   @click="bargain(item.id)">
            取消砍价
          </view>
          <view class="chakxq"   @click="tiaozhuan(item.id)">
            查看详情
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from "vue";
  import {
    useUserStore
  } from "../../store/user.js"
  const userStore = useUserStore()
  //获取收藏列表
  const {
    userbargainlist
  } = userStore
  userStore.getbargainlist()
  //取消收藏弹框
  const celshow = ref(false)
  //取消收藏商品$("#")
  const goods_id = ref(goods_id)
  //取消砍价
  function bargain(id){
     goods_id.value = id
     celshow.value = true
  }
  function cancelbargain() {
    userStore.cancelbargain(goods_id.value)
  }
  //跳转砍价详情页面
  function tiaozhuan(goodid) {
    uni.navigateTo({
      url: `/subPack/kanjia/kanjia?goods_id=${goodid}`
    })
  }
</script>

<style scoped lang="scss">
  .Full-item {
    width: 100%;
    height: 270rpx;
    display: flex;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;

    // 中
    .item-c {
      // border: 1px solid red;
      display: flex;
      margin-left: 40rpx;

      // 图片
      .item-img {
        width: 200rpx;
        height: 300rpx;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        /* 垂直居中 */

        image {
          width: 100%;
          height: 70%;
          border-radius: 10rpx;
        }
      }


    }

    // 内容
    .item-nr {
      width: 90%;
      height: 300rpx;
      // border: 1px solid red;
      position: relative;
      left: 20rpx;

      .nr-title {
        margin: 20rpx 10rpx;
        margin-top: 50rpx;
        font-size: 30rpx;
        overflow: hidden;

        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .nr-guige {
        display: block;
        color: #888888;

        margin-left: 20rpx;
        font-size: 12px;
      }

      .nr-price {
        display: block;
        color: #ff4444;
        margin-left: 20rpx;
        margin-top: 10rpx;

      }

      // 右
      .item-y {
        width: 270rpx;
        height: 80rpx;
        // border: 1px solid red;
        position: absolute;
        bottom: 50rpx;
        right: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
        .quxuaoikj {
          padding: 5rpx 10rpx;
          border-radius: 20rpx;
          background-color: #ff4444;
        
        }

        .chakxq {
          padding: 5rpx 10rpx;
          border-radius: 20rpx;
          background-color: #57bead;
        
        }

      }
    }
  }
</style>